<template>
    <div class="formPrint">
      <div class="topbar">
        <div class="back">
          <i class="icon el-icon-arrow-left"></i>
          <span class="txt">返回</span>
        </div>
        <div class="title">耗材派发单</div>
        <button type="button" class="el-button printBtn el-button--primary el-button--mini" @click="handlePrint">
          <span>打印</span>
        </button>
      </div>
      <div class="printBody">
        <div id="printForm">
          <div class="documentInfo">
            <div class="columnTitle">
              <div>单据信息</div>
              <div class="underline"></div>
            </div>
            <div class="list">
              <div class="item">
                <div class="row">
                  <div class="label">单据编号</div>
                  <div class="value">ZCCL2024041100001</div>
                </div>
                <div class="row">
                  <div class="label">派发处理人</div>
                  <div class="value">欧科</div>
                </div>
                <div class="row">
                  <div class="label">派发时间</div>
                  <div class="value">-</div>
                </div>
              </div>
              <div class="item">
                <div class="row">
                  <div class="label">领用人</div>
                  <div class="value">欧科</div>
                </div>
          
                <div class="row">
                  <div class="label">领用部门</div>
                  <div class="value">总经办</div>
                </div>
                <div class="row">
                  <div class="label">出库仓库</div>
                  <div class="value">总经办</div>
                </div>
              </div>
              <div class="rows">
                  <div class="label">备注</div>
                  <div class="value">-</div>
                </div>
           
            </div>
          </div>
          <div class="assetList">
            <div class="columnTitle">
              <div>资产列表</div>
              <div class="underline"></div>
            </div>
            <div class="table">
              <table class="vxe-table vxe-table--render-default">
               
              </table>
            </div>
          </div>
        </div>
      </div>
 
    </div>
  </template>

  <script setup>

  const handlePrint = () => {
    window.print();
  };
  </script>
  
  <style scoped>
  
  .formPrint {
    font-family: Arial, sans-serif;
    background-color: #ffffff;
    color: #333333;
    padding: 20px;
    border: 1px solid #dddddd;
    border-radius: 5px;
  }
  
  .topbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 20px;
    background-color: #f5f5f5;
    border-bottom: 1px solid #dddddd;
  }
  
  .back {
    display: flex;
    align-items: center;
  }
  
  .icon {
    margin-right: 10px;
    color: #888888;
  }
  
  .title {
    font-size: 24px;
    font-weight: bold;
    text-align: center;
    letter-spacing: 1px;
    padding: 20px 0;
    margin: 0 auto;
    color: #333333;
  }
  
  .printBtn {
    cursor: pointer;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    background-color: #007BFF;
    color: #ffffff;
    margin-top: 20px;
    transition: background-color 0.3s;
  }
  
  .printBtn:hover {
    background-color: #0056b3;
  }
  
  .printBody {
    padding: 20px;
  }
  
  .documentInfo, .assetList {
    margin-top: 20px;
  }
  
  .columnTitle {
    height: 40px;
    position: relative;
    background-color: #f5f5f5;
    border-bottom: 1px solid #dddddd;
    padding: 0 20px;
  }
  
  .columnTitle div:first-child {
    height: 40px;
    line-height: 40px;
    font-size: 18px;
    font-weight: bold;
    color: #333333;
    padding: 0 14px;
    position: relative;
    z-index: 1;
  }
  
  .underline {
    width: 100%;
    border-bottom: 1px solid #dddddd;
    position: absolute;
    top: 0px;
  }
  
  .list .item {
    margin-top: 16px;
    display: flex;
    column-count: 3;
    column-gap: 16px;
  }
  
  .row {
    width: calc(33.3333% - 10.6667px);
  }
  
  .label {
    font-size: 16px;
    color: #666666;
  }
  
  .value {
    width: 100%;
    line-height: 24px;
    font-size: 16px;
    border: 1px solid #dddddd;
    box-sizing: border-box;
    padding: 10px 14px;
    margin-top: 10px;
    color: #333333;
  }
  
  .table {
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0;
  }
  
  .table th, .table td {
    border: 1px solid #dddddd;
    padding: 10px;
    text-align: left;
  }
  
  .table th {
    background-color: #f2f2f2;
    font-weight: bold;
    color: #333333;
  }
  
  .table td {
    color: #666666;
  }
  .add{
    width: 70%;
  }
  </style>